<template>
    <div class="image-loader-container" :style="{ ...style }">
        <img v-if="!isLoading" :src="placeholder" alt="" class="placeholder img">
        <img :style="{
            opacity: originLoader,
            transition: `${duration}ms`
        }" :src="src" @load="handleLoad" alt="" class="img">
    </div>
</template>

<script setup>
import { defineProps, ref } from "vue";
const isLoading = ref(false);
const originLoader = ref(0);
const duration = ref(2000);
const { src, placeholder, handLoading, isListImage, style } = defineProps({
    src: {
        type: String,
        default: ""
    },
    placeholder: {
        type: String,
        default: ""
    },
    handLoading: {
        type: Function,
    },
    isListImage: {
        type: Boolean,
        default: false
    },
    style: {
        type: Object
    }
})

function handleLoad(e) {
    if (!isListImage) {
        setTimeout(() => {
            isLoading.value = true;
            originLoader.value = 1;
            handLoading(true);
        }, duration.value);
        return;
    }
    isLoading.value = true;
    originLoader.value = 1;

}
</script>

<style lang="less" scoped>
@import url("@/style/center.less");
@import url("@/style/var.less");

.image-loader-container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;

    .img {
        .self-fill();

        object-fit: cover;
    }
}

.placeholder {
    filter: blur(2vw);
}
</style>